<template>
    <div class="app-container">
        <el-card class="filter-container" shadow="never">
            <div>
                <el-form style="float:left" :inline="true" :model="listQuery" size="small" label-width="140px">
                    <el-form-item label="输入搜索：">
                        <el-input style="width: 203px" v-model="listQuery.companyName" placeholder="公司名称"></el-input>
                    </el-form-item>
                </el-form>
                <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">
                    查询搜索
                </el-button>
                <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">
                    重置
                </el-button>
                <el-button style="float:right;margin-right: 15px" @click="addPerformance()" size="small">
                    新增
                </el-button>
            </div>
        </el-card>

        <div class="table-container">
            <el-table ref="orderTable" :data="list" style="width: 100%;" v-loading="listLoading" border>
                <el-table-column v-for="(item, index) in column" :label="item.name" :key="index" :width="item.width"
                    :align="item.align">
                    <template slot-scope="scope">
                        <span v-if="item.type === 'date'">{{ scope.row[item.key] }}</span>
                        <span v-else>{{ scope.row[item.key] || '暂无' }}</span>
                    </template>

                </el-table-column>
                <el-table-column label="操作" width="250" align="center">
                    <template slot-scope="scope">
                        <el-button size="mini" type="primary" @click="handlePerformanceDetail(scope.row)">编辑</el-button>
                        <el-button size="mini" type="danger" @click="delPerformance(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="pagination-container">
            <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper" :current-page.sync="listQuery.pageNum"
                :page-size="listQuery.pageSize" :page-sizes="[5, 10, 15]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getPerformances, delPerformance } from '@/api/performance'
const defaultListQuery = {
    pageNum: 1,
    pageSize: 10,
};
const column = [
    {
        name: '绩效ID',
        align: 'center',
        with: '120',
        key: 'performanceId',
    }, {
        name: '指标名称',
        align: 'center',
        with: '120',
        key: 'metricName',
    }, {
        name: '指标值',
        align: 'center',
        with: '120',
        key: 'metricValue',
    }, {
        name: '公司名称',
        align: 'center',
        with: '120',
        key: 'companyName',
    }, {
        name: '日期',
        align: 'center',
        with: '120',
        key: 'date',
        type: 'date'
    },
]
export default {
    name: "orderList",
    computed: {
        ...mapGetters([
            'userId',
        ])
    },
    components: {},
    data() {
        return {
            listQuery: Object.assign({}, defaultListQuery),
            listLoading: true,
            list: null,
            total: null,
            operateType: null,
            multipleSelection: [],
            detail: {
                dialogVisible: false,
                content: null,
                orderIds: []
            },
            addCompany: {
                dialogVisible: false,
                isAdd: true
            },
            column,
            editCompanyformData: {
            },
            currentEditCompanyId: '',
            currnetRow: {},
            isAdd: true,
        }
    },
    created() {
        this.getList();
    },

    methods: {
        showAddCompany() {
            this.addCompany = {
                dialogVisible: true,
                isAdd: true
            }
        },
        handleResetSearch() {
            this.listQuery = Object.assign({}, defaultListQuery);
            this.getList();
        },
        handleSearchList() {
            this.listQuery.pageNum = 1;
            this.getList();
        },
        handlePerformanceDetail(row) {
            this.$router.push({ path: '/company/performanceDetail', query: { id: row.performanceId } })
            this.detail.dialogVisible = true
            this.currnetRow = row;
        },
        editCompanyDetail(row) {
            this.addCompany = {
                dialogVisible: true,
                isAdd: false,
            }
            this.editCompanyformData = { ...row };
            this.currentEditCompanyId = row.companyId;

        },
        async handleAddCompany() {
            const requestParams = {
                ...this.editCompanyformData,
                companyId: this.currentEditCompanyId ? this.currentEditCompanyId : null,
                createUserId: this.userId,
                updateUserId: this.userId
            }

            this.currentEditCompanyId = ''

            await saveOrUpdateCompany(requestParams);

            this.$message.success('操作成功');

            this.addCompany.dialogVisible = false;

            this.handleSearchList()

        },
        handleSizeChange(val) {
            this.listQuery.pageNum = 1;
            this.listQuery.pageSize = val;
            this.getList();
        },
        getList() {
            this.listLoading = true;
            getPerformances(this.listQuery).then(response => {
                this.listLoading = false;
                this.list = response.data.list;
                this.total = response.data.total;
            });
        },
        handleCurrentChange(val) {
            this.listQuery.pageNum = val;
            this.getList();
        },
        delPerformance(row) {
            this.$confirm('是否要进行该删除操作?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delPerformance({
                    "id": row.personId,
                    "userId": this.userId,
                }).then(response => {
                    this.$message({
                        message: '删除成功！',
                        type: 'success',
                        duration: 1000
                    });
                    this.getList();
                });
            })
        },
        addPerformance() {
            this.$router.push({ path: '/company/performanceDetail'})
        }
    }
}
</script>
<style scoped>
.input-width {
    width: 203px;
}

.detail-modal {
    width: 98%;
    height: calc(100vh - 120px);
    overflow-y: scroll;
}
</style>
  
  
  